﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="add_model.aspx.cs" Inherits="AutoFix.add_model" %>

<%@ Register Src="~/controls/page_name.ascx" TagPrefix="uc1" TagName="page_name" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
        <script type="text/javascript" src="js/add_model.js"></script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="AdditionalPlaceHolder" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="MessagePlaceHolder" runat="server">Add a vehicle model, type and year into the system
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <asp:HiddenField ID="hdnModelSelectedValue" runat="server" />
    <asp:HiddenField ID="hdnModelTypeSelectedValue" runat="server" />
    <asp:HiddenField ID="hdnModelTypeYearSelectedValue" runat="server" />
        <asp:HiddenField ID="hdnIsModelExists" runat="server" />
    <asp:HiddenField ID="hdnIsModelTypeExists" runat="server" />
    <asp:HiddenField ID="hdnIsModelYearExists" runat="server" />
    <asp:HiddenField ID="hdnModelInfo" runat="server" /><asp:HiddenField ID="hdnModelTypeInfo" runat="server" />
    <div id="pageActionMessage" runat="server"></div>
    <div id="column-left-common">
        <div class="column-section">
            <div class="field-name">Vehicle Model:</div>
            <div class="input-field-holder">
                <asp:DropDownList ID="ddVehicleModel" runat="server" CssClass="text-box-small toggleVModel" />
                <asp:TextBox ID="txtVehicleModel" runat="server" ClientIDMode="Static" CssClass="text-box-small toggleVModel" />
                &nbsp;<asp:HyperLink ID="lnkAddModel" runat="server" Text="Add" CssClass="text-size-one-bold" ClientIDMode="Static" />
                
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Vehicle Model Type:</div>
            <div class="input-field-holder">
                 <asp:DropDownList ID="ddVehicleModelType" runat="server" CssClass="text-box-small toggleVModelType" />
                <asp:TextBox ID="txtVehicleModelType" runat="server" ClientIDMode="Static" CssClass="text-box-small toggleVModelType" />
                 &nbsp;<asp:HyperLink ID="lnkAddModelType" runat="server" Text="Add" CssClass="text-size-one-bold" ClientIDMode="Static" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Model Year:</div>
            <div class="input-field-holder">
                <asp:DropDownList ID="ddVehicleModelYear" runat="server" CssClass="text-box-small toggleVModelTypeYear"  ClientIDMode="Static" />
                <asp:TextBox ID="txtVehicleModelTypeYear" runat="server" ClientIDMode="Static" CssClass="text-box-small toggleVModelTypeYear" />
                
                 &nbsp;<asp:HyperLink ID="lnkAddModelYear" runat="server" Text="Add" CssClass="text-size-one-bold" ClientIDMode="Static" />
            </div>
            <div class="clear"></div>
        </div>
       
    </div>
    <div id="column-right-common">
        <div class="column-section">
            <div class="field-name">Vehicle Image:</div>
            <div class="input-field-holder">
                <asp:FileUpload ID="fleVehicleImage" runat="server" CssClass="text-box-small" /><br /><span class="text-size-one">Only jpegs are allowed.</span>
            </div>
            <div class="clear"></div>
            <div class="image-medium">
                <asp:Image ID="imgVehicleImage" runat="server" /><div class="clear"></div></div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="button-holder">
        <asp:Button ID="btnAddModel" runat="server" Text="Add Model" CssClass="button" OnClick="btnAddModel_Click"  /><div class="clear"></div>
    </div>
    
    <script src="js/common.js"></script>
    <script type="text/ecmascript">

        var vehicleModelType = null;
        var pageName = "add_model.aspx";
        var modelTexBox = "#<%=txtVehicleModel.ClientID%>";
var modelTypeTextBox = "#<%=txtVehicleModelType.ClientID%>";
        var modelTypeYear = "#<%=txtVehicleModelTypeYear.ClientID%>";
        var hdnModelExists = "#<%=hdnIsModelExists.ClientID%>";
        var hdnModelTypeExists = "#<%=hdnIsModelTypeExists.ClientID%>";
        var hdnModelTypeYearExists = "#<%=hdnIsModelYearExists.ClientID%>";


        function InitializeMethods() {
            $(modelTexBox).bind("change", function () { CheckStringExists(modelTexBox, "#<%=ddVehicleModel.ClientID%>", hdnModelExists, "The model already exists in the model selection") });
    $(modelTypeTextBox).bind("change", function () { CheckStringExists(modelTypeTextBox, "#<%=ddVehicleModelType.ClientID%>", hdnModelTypeExists, "The model type already exists in the model type selection") });
    $(modelTypeYear).bind("change", function () { CheckStringExists(modelTypeYear, "#<%=ddVehicleModelYear.ClientID%>", hdnModelTypeYearExists, "The model year exists in the model year selection") });
}
function InitiateAjaxCall() {
    var holder = null;
    GetDataViaAjax(holder, pageName, '', BindModelData, "GetAllModels");
    holder = null;
}
function CheckStringExists(textbox, dropDown, hdnData, msg) {
    $(hdnData).val("");
    $("#<%=pageActionMessage.ClientID%>").text("");
    $("#<%=pageActionMessage.ClientID%>").removeAttr("class");
    var listItems = $(dropDown).children();
    for (var i = 0; i < listItems.length; i++) {
        var textBox = textbox
        if ($(textBox).val() != "") {
            var originalString = $(textBox).val().toLowerCase();
            var compareString = $(listItems[i]).text().toLowerCase();
            var IsMatched = (originalString == compareString);
            if (IsMatched) {
                $("#<%=pageActionMessage.ClientID%>").text(msg);
                $("#<%=pageActionMessage.ClientID%>").attr("class", "information-msg");
                $(hdnData).val("1");
            }
        }
    }
}


function SelectModelInfo(data, serverMethod, clientFunction) {
    var data = data;
    var holder = null;
    GetDataViaAjax(holder, pageName, data, clientFunction, serverMethod);
    holder = null;
    data = null;

}


function BindModelData(holder) {
    if (holder != null) {
        var listItem = "";
        for (var i = 0; i < holder.length; i++) {
            listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>";
        }

        var clientID = "#<%=ddVehicleModel.ClientID%>";
        $(clientID).children().remove();
        $(clientID).append(listItem);
        $(clientID).change(function (e) {
            var data = JSON.stringify({ vehicleModelID: $(this).val() });
            $("#<%=hdnModelInfo.ClientID%>").val($(this).val());

            SelectModelInfo(data, "GetModelTypes", BindModelDataType);
            $("#<%=hdnModelSelectedValue.ClientID%>").val($(clientID + " option:selected").text());
        });

        $(clientID).change();
    }
    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }
}
function BindModelDataType(holder) {
    if (holder != null) {
        var listItem = "";
        for (var i = 0; i < holder.length; i++) {
            listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
        }
        var clientID = "#<%=ddVehicleModelType.ClientID%>";
        $(clientID).children().remove();
        $(clientID).append(listItem);

        $(clientID).change(function (e) {
            var data = JSON.stringify({ vehicleModelTypeID: $(this).val() });
            vehicleModelType = data;
            $("#<%=hdnModelTypeInfo.ClientID%>").val($(this).val());
            SelectModelInfo(data, "GetModelTypeYears", BindModelYear);
            $("#<%=hdnModelTypeSelectedValue.ClientID%>").val($(clientID + " option:selected").text());
        });
        $(clientID).change();
    }
    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model types");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }
}

function BindModelYear(holder) {
    if (holder != null) {
        var listItem = "";
        for (var i = 0; i < holder.length; i++) {
            listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
        }
        var clientID = "#<%=ddVehicleModelYear.ClientID%>";
        $(clientID).children().remove();
        $(clientID).append(listItem);
        $("#<%=hdnModelTypeYearSelectedValue.ClientID%>").val($(clientID + " option:selected").text());
        if (vehicleModelType != null) {
            SelectModelInfo(vehicleModelType, "GetModelImage", BindImage);
        }

    }

    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model type years");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }

}
function BindImage(holder) {
    if (holder != null) {
        var clientID = "#<%=imgVehicleImage.ClientID%>";
        $(clientID).attr("src", holder[0].Value);

    }

    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model image");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }

}

InitiateAjaxCall();
InitializeMethods();
    </script>
</asp:Content>
